<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="500"
      height="500"
      style="border: 1px red solid"
    ></canvas>
  </body>
</html>
<script src="./polygon.js"></script>
<script>
  const canvas = document.getElementById("canvas");
  const cxt = canvas.getContext("2d");
  // cxt.save()
  cxt.moveTo(50, 100);
  cxt.lineTo(50, 50);
  cxt.strokeStyle = "red";
  cxt.stroke();

  // cxt.restore()
  /*
      目前关于save与restore 目前这个颜色的呈现是有些让人
    */
  cxt.beginPath();
  cxt.moveTo(150, 100);
  cxt.lineTo(150, 50);
  cxt.stroke();

  // 画一个拆线
  // cxt.strokeStyle = 'yellow'
  cxt.beginPath();

  cxt.moveTo(150, 150);
  cxt.lineTo(250, 150);
  cxt.lineTo(150, 250);
  cxt.lineTo(250, 250);
  cxt.strokeStyle = "green"; // 两次不同的赋值 如果会进行叠加的
  cxt.stroke();

  //  画矩形
  cxt.beginPath();
  cxt.strokeStyle = "orange";
  //   cxt.strokeRect(200, 200, 100, 200);
  cxt.rect(200, 200, 100, 200);
  cxt.lineWidth = 10;
  cxt.stroke();
  cxt.fillStyle = "red";
  cxt.fill();

  //   画布清空
  function clearCanvas() {
    cxt.clearRect(0, 0, canvas.width, canvas.height);
  }

  //   clearCanvas()

  // 绘制多边形
  createPolygon(cxt, 7, 100, 75, 50);
  cxt.fillStyle='red';
  cxt.fill();

//   
</script>
